<template>
    <div class="changePassword">
        <div class="content">
            <div class="u14">
                <p class="p1">重置密码</p>
                <p class="p2">填入密保关键字进行密码找回</p>
            </div>
            <div class="email">
                <div>账号：</div>
                <p id="warn1">*请输入账户名</p>
                <input id="emailCheck" class="email2" type="text" v-model="name">
                <div class="hr1"></div>
            </div>

            <div class="password">
                <div>密保：</div>
                <input class="email2" type="text" v-model="save">
                <div class="hr1"></div>
            </div>

            <div class="pass">
                <div>新密码：</div>
                <input class="email2" type="text" v-model="checkPass">
                <div class="hr1"></div>
            </div>

            <router-link to="">
                <div class="submitOK" id="submitOK">
                    <p @click="resetPass">确认</p>
                </div>
            </router-link>
        </div>
    </div>
</template>
<script scoped>
    export default{
        data(){
            return {
                name: '',
                save: '',
                checkPass: '',
            }
        },
        methods: {
            resetPass(){
                console.log('rest');
                var _this = this;
                var params = new URLSearchParams();
                params.append('name', this.name);
                params.append('checkPass', this.checkPass);
                params.append('save', this.save);
                this.http.post('/users/resetpass', params).then(
                    function (res) {
                        console.log(res);
                        if (res.data == -4) {
                            _this.$message('没有这个用户');
                        } else if (res.data == 1) {
                            _this.$router.push({path: '/login'})
                            _this.$message('修改成功');
                        } else if (res.data == -1){
                            _this.$message('密保填写错误');

                        }
                    }
                ).catch(
                    function (err) {
                        console.log(err);
                    }
                );
            },


            open(val) {
                this.$message({
                    type: 'info',
                    message: `提示: ${ val }`
                });


            },

            mounted(){

            }
        }
    }
</script>
<style scoped>
    .content {
        height: 538px;
        background: white no-repeat top center;
        margin-top: 5px;
    }

    .u14 {
        width: 160px;
        height: 49px;
        background: white no-repeat top center;
        margin: 0 auto;
        top: 80px;
        position: relative;
    }

    .u14 .p1 {
        font-size: 30px;
        font-family: 微软雅黑;
        color: rgba(0, 0, 0, 0.7);
        top: 5px;
        left: 18px;
        position: relative;
    }

    .u14 .p2 {
        font-size: 12px;
        font-size: 微软雅黑;
        color: rgba(0, 0, 0, 0.5);
        top: 16px;
        left: 3px;
        position: relative;
    }

    .email {
        width: 400px;
        height: 25px;
        margin: 0 auto;
        top: 140px;
        position: relative;
    }

    .email1 {
        width: 23px;
        height: 19px;
        background: url("../assets/images/忘记密码/changePassword_u17.png") no-repeat top center;
        left: 5px;
        position: absolute;
    }

    .email2 {
        width: 260px;
        height: 20px;
        top: 1px;
        left: 40px;
        position: absolute;
        font-size: 20px;
    }

    .hr1 {
        width: 400px;
        height: 1px;
        background: url("../assets/images/忘记密码/changePassword_u22.png") repeat center;
        top: 30px;
        left: 2px;
        position: absolute;
    }

    #warn1 {
        height: 20px;
        width: 160px;
        color: red;
        font-size: 10px;
        margin-left: 310px;
        padding-top: 5px;
        positive: absolute;
        display: none;
    }

    .password {
        width: 400px;
        height: 25px;
        margin: 0 auto;
        top: 180px;
        position: relative;
    }

    .pass {
        width: 400px;
        height: 25px;
        margin: 0 auto;
        top: 220px;
        position: relative;
    }

    .password1 {
        width: 19px;
        height: 23px;
        background: url("../assets/images/忘记密码/changePassword_u18.png") no-repeat top center;
        top: 0;
        left: 7px;
        position: relative;
    }

    .password2 {
        width: 170px;
        height: 20px;
        top: -30px;
        left: 40px;
        position: relative;
        font-size: 20px;
    }

    .hr2 {
        width: 210px;
        height: 1px;
        background: url("../assets/images/忘记密码/changePassword_u22.png") repeat center;
        top: 34px;
        left: 3px;
        position: absolute;
    }

    .code {
        width: 110px;
        height: 40px;
        top: -30px;
        left: 60px;
        position: relative;
    }

    .changeCode {
        width: 43px;
        height: 15px;
        background: white;
        top: -60px;
        left: 360px;
        position: relative;
        font-size: 14px;
        text-decoration: underline;
        color: #b0bec7;
    }

    .submitOK {
        width: 400px;
        height: 50px;
        background: #de3735 no-repeat top center;
        margin: 0 auto;
        top: 230px;
        left: 2px;
        position: relative;
        border-radius: 5px;
    }

    .submitOK p {
        font-size: 22px;
        color: rgba(255, 255, 255, 0.9);
        font-family: 微软雅黑;
        position: relative;
        top: 15px;
        left: 138px;
    }
</style>